<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>后台管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="icon" href="javascript:;">
  <link rel="stylesheet" href="../../resource/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="../../resource/myResource/css/no_read_item.css">
  <link rel="stylesheet" href="../../resource/myResource/css/personal/personal_detail.css">
  <style>
      .myForm{
        padding-top:15px;
      }
      .mySpan{
        display:block;
        color:rgb(214, 247, 7);
        font-size: 16px;
        margin-left:30px;
        margin-right:20px;
        float: left;
        text-align: left;
      }
      .myLabel{
          display: block;
          float: none;
      }
      .myDiv{
        display: block;
        float: left;
        margin-top:10px;
        color:black;
      }
      .myLabel2{
          text-align: right;
          padding-right: 0;
          margin-left: 15px;
          color:rgba(255, 255, 255, 0.8);
      }
      .myLabel3{
          padding-left: 15px;
          text-align: left;
          color:rgba(255, 255, 255, 0.8);
      }
      .myLabe4{
          float: left;
          display: block;
      }
  </style>
</head>
<style>
</style>
<body>
    <div class="layui-collapse">
        <input type="hidden" id="fileName">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">
                    <li class="layui-nav-item" style="width:75px">
                        <a href="javascropt:;">学生信息录入</span></a>
                    </li>
                </h2>
                <div class="layui-colla-content  layui-show" style="padding-top:0px; padding-bottom: 15px;">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-form-text">
                            <div class="layui-input-block" style="margin-left: 0px;">
                                <p style="color:red;"   >请确保上传的excel包含以下字段：学生姓名，学生学号，学生性别，学生宿舍，所属区域<p></p>
                            </div>
                                <div class="layui-input-block" style="margin-left: 0px;">
                                <button type="button" class="layui-btn" id="test1" style="float:left;">
                                <i class="layui-icon">&#xe67c;</i>excel上传
                                </button>
                                <label class="layui-form-label" style="color:rgb(163, 27, 27)" id="remsg"></label>
                              
                            </div>  
                            <form class="layui-form myForm" id="myForm" action="" style=" display: none">
                              <div class="layui-inline">
                                    <label class="layui-form-label">学生姓名</label>
                                    <div class="layui-input-inline">
                                        <select id="studentName">
                                            <option value="">请选择映射</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">学生学号</label>
                                    <div class="layui-input-inline">
                                        <select id="studentIden">
                                            <option value="">请选择映射</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">学生性别</label>
                                    <div class="layui-input-inline">
                                        <select id="gender">
                                            <option value="">请选择映射</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">学生宿舍</label>
                                    <div class="layui-input-inline">
                                        <select id="studentAddr">
                                            <option value="">请选择映射</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">所属区域</label>
                                    <div class="layui-input-inline">
                                        <select id="area">
                                            <option value="">请选择映射</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label"></label>
                                    <button type="button" class="layui-btn layui-btn-normal "onclick="commitBtn()">开始插入数据</button>
                                </div>
                            </form>
                            <div id="rediv" style="border-top:solid black; margin-top:20px; display:none;">
                                <div class="layui-input-block">
                                    <label class="myLabe4" id="suc" style="width:100px">成功：</label>
                                    <label class="myLabe4" id="fal" style="width:100px">失败：</label>
                                </div>
                                <div class="layui-input-block">
                                    <label class="myLabe4" style="width:100px">失败学号：</label>
                                    <label class="myLabe4" id="lis" style="width:100px"></label>
                                </div>
                            </div>        
                        </div>
                    </div>
                </div>
            </div>
        </div>

    
    <script src="../../resource/jquery/dist/jquery.js"></script>
    <script src="../../resource/jquery/jquery.tmpl.min.js"></script>
    <script src="../../resource/layui/layui.js" charset="utf-8"></script>
    <script src="../../resource/myResource/js/base.js"></script>
    <script src="../../resource/myResource/js/student/student_info_upload.js"></script>
    <!-- excel上传 -->
    <script type="text/javascript">
        layui.use('upload', function(){
            layui.use(['form', 'layedit', 'laydate'], function(){});
            var index

            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: head+'/tool/excUpload' //上传接口
                ,multiple: true
                ,accept:'file'
                ,before:function(){
                    index= layer.load(2, {
                        content:'上传中.....'
                        ,success: function(layero){
                            layero.find('.layui-layer-content').css('padding-top', '40px').css('width','100px');
                        }}
                        )
                }
                ,done: function(redata){
                    //上传完毕回调
                    if(redata.code!=0){
                        var remsg = $("#remsg");
                        remsg.attr("style","color:rgb(163, 27, 27)");
                        remsg.text("上传失败！")
                        layer.close(index);
                    }
                    
                    var remsg = $("#remsg");
                    remsg.attr("style","color:rgb(113, 172, 54)");
                    remsg.text("上传成功！")
                    var btn = $("#test1");
                    btn.attr("class","layui-btn layui-btn-disabled");
                    btn.attr("disabled","disabled");
                    layer.close(index);
                    //渲染
                    var fileName = redata.data.fileName;
                    // debugger;
                    $("#fileName").val(fileName);
                    var data = redata.data.title;
                    $.each(data,function(i,data){
                        $("#studentName").append('<option value="'+data.value+'">'+data.text+'</option>');
                        $("#studentIden").append('<option value="'+data.value+'">'+data.text+'</option>');
                        $("#studentAddr").append('<option value="'+data.value+'">'+data.text+'</option>');
                        $("#area").append('<option value="'+data.value+'">'+data.text+'</option>');
                        $("#gender").append('<option value="'+data.value+'">'+data.text+'</option>');
                    })
                    $("#myForm").attr("style","");
                    var form = layui.form;
                    form.render('select');
                }
                ,error: function(){
                //请求异常回调
                var remsg = $("#remsg");
                remsg.attr("style","color:rgb(163, 27, 27)");
                remsg.text("上传失败！")
                layer.close(index);
                }
            });
        });

    </script>
    <script id="template" type="text/x-template">
        <div>
            <div style="padding-bottom:100%;background-color: #393D49">
                <span class="mySpan" style="margin-top:30px">注意：字段映射关系到数据库的数据正确性。</span>
                <span class="mySpan" style="margin-bottom:30px">如若确认无误请点击确定提交</span>
            
                <div class="layui-input-block myDiv" style="margin-left: 0px;">
                    <label class="layui-form-label myLabel2" >学生姓名：</label>
                    <label class="layui-form-label myLabel3" id="studentName_sure">${studentName_sure}</label>
                </div>
                <div class="layui-input-block myDiv" style="margin-left: 0px;">
                    <label class="layui-form-label myLabel2" >学生学号：</label>
                    <label class="layui-form-label myLabel3" id="studentIden_sure">${studentIden_sure}</label>
                </div>
                <div class="layui-input-block myDiv" style="margin-left: 0px;">
                        <label class="layui-form-label myLabel2" >学生性别：</label>
                        <label class="layui-form-label myLabel3" id="gender_sure">${gender_sure}</label>
                    </div>
                <div class="layui-input-block myDiv" style="margin-left: 0px;">
                    <label class="layui-form-label myLabel2" >学生宿舍：</label>
                    <label class="layui-form-label myLabel3" id="studentAddr_sure">${studentAddr_sure}</label>
                </div>
                <div class="layui-input-block myDiv" style="margin-left: 0px; padding-bottom:30px;">
                    <label class="layui-form-label myLabel2" >所属区域：</label>
                    <label class="layui-form-label myLabel3" id="area_sure">${area_sure}</label>
                </div>
            </div>
        <div>
    </script>
    <script>
        function commitBtn(){
            var data = {};
            data.studentName = $("#studentName option:selected").attr('value');
            data.studentIden = $("#studentIden option:selected").attr('value');
            data.gender = $("#gender option:selected").attr('value');
            data.studentAddr = $("#studentAddr option:selected").attr('value');
            data.area = $("#area option:selected").attr('value');
            var dataStr = {};
            dataStr.studentName_sure = $("#studentName option:selected").text();
            dataStr.studentIden_sure = $("#studentIden option:selected").text();
            dataStr.gender_sure = $("#gender option:selected").text();
            dataStr.studentAddr_sure = $("#studentAddr option:selected").text();
            dataStr.area_sure = $("#area option:selected").text();
           
            var template = $("#template");
            var res = $("#template").tmpl(dataStr);
            console.info(res.html());
            var loadIndex;
            // console.info(res);
            // debugger;
            // debugger;
            var fileName = $("#fileName").val();
            layer.open({
                type: 1
                ,title: false //不显示标题栏
                ,closeBtn: false
                ,area: '370px;'
                ,shade: 0.8
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,btn: ['确定提交', '重新选择']
                ,btnAlign: 'c'
                ,moveType: 1 //拖拽模式，0或者1
                ,content: res.html()
                ,yes: function(index, layero){
                    //提交事件
                    loadIndex = layer.load(2, {
                        content:'上传中.....'
                        ,success: function(layero){
                            layero.find('.layui-layer-content').css('padding-top', '40px').css('width','100px');
                        }
                    });
                    // alert(fileName);
                    
                    $.ajax({
                    url:head+"/tool/infoInsert?fileName="+fileName,
                    dataType:"json",
                    contentType:'application/json;charset=UTF-8',
                    type:"POST",
                    data:JSON.stringify(data),
                    success:function(redata){
                        if(redata.code == 0){
                            // debugger;
                            $("#rediv").attr("style","border-top:solid black; margin-top:20px;");
                            var re = $("#result");
                            $("#suc").text($("#suc").text()+redata.data.successCount);
                            $("#fal").text($("#fal").text()+redata.data.failCount);
                            var lis = $("#lis");
                            $.each(redata.data.failIden,function(i,data){
                                lis.append(data+'<br>');
                            })
                        }else{
                            layer.msg(redata.msg);
                        }
                        layer.close(loadIndex);
                        layer.close(index);
                    }
                    });
                },btn2:function(index, layero){
                    //取消，关闭弹出层
                    layer.close(index);
                }
            });
        }
    </script>
    
    <!-- <script src="../../resource/myResource/js/repaorjs/repair_history.js" charset="utf-8">    </script> -->
    
</body> 
</html>